<template>
  <div class="forgot-password-container">
    <h2>忘记密码</h2>
    <el-form :model="form" label-width="120px">
      <!-- 手机号输入 -->
      <el-form-item label="手机号">
        <el-input
            v-model="form.phone"
            placeholder="请输入手机号"
            clearable
            @blur="handlePhoneBlur"
        />
      </el-form-item>

      <!-- 验证码区域 -->
      <el-form-item label="验证码">
        <el-input
            v-model="form.verifyCode"
            placeholder="请输入验证码"
            clearable
            style="width: 60%"
        />
        <!-- 获取验证码按钮，根据倒计时状态禁用 -->
        <el-button
            type="primary"
            :disabled="countDown > 0"
            @click="handleGetCode"
            style="margin-left: 10px"
        >
          {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
        </el-button>
      </el-form-item>

      <!-- 新密码输入 -->
      <el-form-item label="新密码">
        <el-input
            v-model="form.newPassword"
            placeholder="请输入新密码"
            clearable
            show-password
        />
      </el-form-item>

      <!-- 重置密码按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleResetPassword">重置密码</el-button>
        <el-button @click="handleBackLogin" style="margin-left: 10px">返回登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import router from "@/router/index.js";
import {handleResetPasswordApi} from "@/api/forgetPasswordapi.js";
import {getCodeApi} from "@/api/regapi.js"; // 或其他请求库

// 表单数据
const form = reactive({
  phone: '',
  verifyCode: '',
  newPassword: '',
  scene: 'forgot_password' // 场景标识，用于区分验证码用途
})

// 倒计时变量
const countDown = ref(0)
// 手机号正则（简单示例，可根据需求完善）
const phoneReg = /^1[3-9]\d{9}$/

/**
 * 手机号失去焦点校验
 */
const handlePhoneBlur = () => {
  if (!phoneReg.test(form.phone)) {
    ElMessage.warning('请输入正确的手机号格式')
  }
}

//todo 获取验证码
const handleGetCode = async () => {
  if (!phoneReg.test(form.phone)) {
    ElMessage.warning('请输入正确的手机号')
    return
  }

  try {
    // todo 调用封装的发送验证码接口
    const response = await getCodeApi(form.phone, form.scene);
    ElMessage.success('验证码发送成功')
    // 启动倒计时
    startCountDown()

  } catch(err) {
    ElMessage.error('验证码发送失败：' + err.response?.data || err.message)
  }
}



/**
 * 倒计时逻辑
 */
const startCountDown = () => {
  countDown.value = 60 // 假设5分钟有效期，前端做60s演示，实际可与后端过期时间对齐
  const timer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

//todo 重置密码
const handleResetPassword = async () => {
  if (!form.phone || !form.verifyCode || !form.newPassword) {
    ElMessage.warning('请填写完整信息')
    return
  }
  // // 构造请求数据
  // const data = {
  //   phone: form.phone,
  //   verifyCode: form.verifyCode,
  //   newPassword: form.newPassword
  // };

  try {
    // todo 调用封装的重置密码接口
    const response = await handleResetPasswordApi(form);
    ElMessage.success('密码重置成功，请前往登录')
    // 重置表单（可选，根据需求跳转等）
    form.phone = ''
    form.verifyCode = ''
    form.newPassword = ''
  } catch (err) {
    ElMessage.error('密码重置失败：' + err.response?.data || err.message)
  }
}

/**
 * 返回登录逻辑（可跳转登录页，示例仅提示）
 */
const handleBackLogin = () => {
  ElMessage.info('返回登录页')
  router.push('/login')
}
</script>

<style scoped>
.forgot-password-container {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>